.dx-loadindicator-icon {
    position: relative;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
}
.dx-loadindicator-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    .transform(rotate(180deg));
    .animation(dx-win-loadindicator-orbit 4.95s infinite);

    &:before {
        content: "";
        position: absolute;
        width: 17%;
        height: 17%;
        background: @WIN8_BASE_TEXT;
        top: 0;
        left: 0;
        .border-radius(100%);
    }

    &.dx-loadindicator-segment0 {
        .animation-delay(1.08s);
    }

    &.dx-loadindicator-segment1 {
        .animation-delay(0.22s);
    }

    &.dx-loadindicator-segment2 {
        .animation-delay(0.43s);
    }

    &.dx-loadindicator-segment3 {
        .animation-delay(0.65s);
    }

    &.dx-loadindicator-segment4 {
        .animation-delay(0.86s);
    }

    @-webkit-keyframes dx-win-loadindicator-orbit {
        0% {
            opacity: 1;
            -webkit-transform: rotate(180deg);
            -webkit-animation-timing-function: ease-out;
            z-index: 100;
        }

        7% {
            opacity: 1;
            -webkit-transform: rotate(300deg);
            -webkit-animation-timing-function: linear;
        }

        30% {
            opacity: 1;
            -webkit-transform: rotate(410deg);
            -webkit-animation-timing-function: ease-in-out;
        }

        39% {
            opacity: 1;
            -webkit-transform: rotate(645deg);
            -webkit-animation-timing-function: linear;
        }

        70% {
            opacity: 1;
            -webkit-transform: rotate(770deg);
            -webkit-animation-timing-function: ease-out;
        }

        75% {
            opacity: 1;
            -webkit-transform: rotate(900deg);
            -webkit-animation-timing-function: ease-out;
        }

        76% {
            opacity: 0;
            -webkit-transform: rotate(900deg);
        }

        100% {
            opacity: 0;
            -webkit-transform: rotate(900deg);
        }
    }

    @-moz-keyframes dx-win-loadindicator-orbit {
        0% {
            opacity: 1;
            -moz-transform: rotate(180deg);
            -moz-animation-timing-function: ease-out;
            z-index: 100;
        }

        7% {
            opacity: 1;
            -moz-transform: rotate(300deg);
            -moz-animation-timing-function: linear;
        }

        30% {
            opacity: 1;
            -moz-transform: rotate(410deg);
            -moz-animation-timing-function: ease-in-out;
        }

        39% {
            opacity: 1;
            -moz-transform: rotate(645deg);
            -moz-animation-timing-function: linear;
        }

        70% {
            opacity: 1;
            -moz-transform: rotate(770deg);
            -moz-animation-timing-function: ease-out;
        }

        75% {
            opacity: 1;
            -moz-transform: rotate(900deg);
            -moz-animation-timing-function: ease-out;
        }

        76% {
            opacity: 0;
            -moz-transform: rotate(900deg);
        }

        100% {
            opacity: 0;
            -moz-transform: rotate(900deg);
        }
    }

    @-ms-keyframes dx-win-loadindicator-orbit {
        0% {
            opacity: 1;
            -ms-transform: rotate(180deg);
            -ms-animation-timing-function: ease-out;
            z-index: 100;
        }

        7% {
            opacity: 1;
            -ms-transform: rotate(300deg);
            -ms-animation-timing-function: linear;
        }

        30% {
            opacity: 1;
            -ms-transform: rotate(410deg);
            -ms-animation-timing-function: ease-in-out;
        }

        39% {
            opacity: 1;
            -ms-transform: rotate(645deg);
            -ms-animation-timing-function: linear;
        }

        70% {
            opacity: 1;
            -ms-transform: rotate(770deg);
            -ms-animation-timing-function: ease-out;
        }

        75% {
            opacity: 1;
            -ms-transform: rotate(900deg);
            -ms-animation-timing-function: ease-out;
        }

        76% {
            opacity: 0;
            -ms-transform: rotate(900deg);
        }

        100% {
            opacity: 0;
            -ms-transform: rotate(900deg);
        }
    }

    @-o-keyframes dx-win-loadindicator-orbit {
        0% {
            opacity: 1;
            -o-transform: rotate(180deg);
            -o-animation-timing-function: ease-out;
            z-index: 100;
        }

        7% {
            opacity: 1;
            -o-transform: rotate(300deg);
            -o-animation-timing-function: linear;
        }

        30% {
            opacity: 1;
            -o-transform: rotate(410deg);
            -o-animation-timing-function: ease-in-out;
        }

        39% {
            opacity: 1;
            -o-transform: rotate(645deg);
            -o-animation-timing-function: linear;
        }

        70% {
            opacity: 1;
            -o-transform: rotate(770deg);
            -o-animation-timing-function: ease-out;
        }

        75% {
            opacity: 1;
            -o-transform: rotate(900deg);
            -o-animation-timing-function: ease-out;
        }

        76% {
            opacity: 0;
            -o-transform: rotate(900deg);
        }

        100% {
            opacity: 0;
            -o-transform: rotate(900deg);
        }
    }

    @keyframes dx-win-loadindicator-orbit {
        0% {
            opacity: 1;
            transform: rotate(180deg);
            animation-timing-function: ease-out;
            z-index: 100;
        }

        7% {
            opacity: 1;
            transform: rotate(300deg);
            animation-timing-function: linear;
        }

        30% {
            opacity: 1;
            transform: rotate(410deg);
            animation-timing-function: ease-in-out;
        }

        39% {
            opacity: 1;
            transform: rotate(645deg);
            animation-timing-function: linear;
        }

        70% {
            opacity: 1;
            transform: rotate(770deg);
            animation-timing-function: ease-out;
        }

        75% {
            opacity: 1;
            transform: rotate(900deg);
            animation-timing-function: ease-out;
        }

        76% {
            opacity: 0;
            transform: rotate(900deg);
        }

        100% {
            opacity: 0;
            transform: rotate(900deg);
        }
    }
}

.dx-loadindicator-image {
    background-image: @WIN8_LOADINDICATOR_BACKGROUND;
}

.dx-rtl .dx-loadindicator-icon {
    right: 20%;
    left: 0;
}
